<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船货信息" name="1">
				<template slot="title">
					<div class="compTop">
						<span class="cTitle">船舶信息</span>
						<span class="compTitle">组织</span>
						<el-select
							v-model="formData.companyId"
							v-selecttext="formData.companyName,compData,'companyId'"
							filterable
							collapse-tags
							size="mini"
							:disabled="isGet"
							class="compList"
							@change="changeCompanyId"
						>
							<el-option
								v-for="item in compData"
								:key="item.companyId"
								:label="item.companyName"
								:value="item.companyId"
							></el-option>
						</el-select>
					</div>
				</template>
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input v-model="formData.shipvoyageName" size="mini" placeholder="请输入船名" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="泊位" prop="berthNo" class="top">
								<el-input v-model="formData.berthNo" size="mini" placeholder="请输入货名" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="内外贸" prop="tradeType" class="top">
								<el-input v-model="formData.tradeType" size="mini" placeholder="" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货主" prop="cargoOwnerName" class="top">
								<el-input v-model="formData.cargoOwnerName" size="mini" placeholder="请输入货主" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货代" prop="cargoAgentName" class="top">
								<el-input v-model="formData.cargoOwnerName" size="mini" placeholder="请输入货主" disabled />
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="提单总量" prop="volume" class="top">
								<el-input v-model="formData.volume" size="mini" placeholder="" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="付款单位" prop="payCompanyId" class="top">
								<el-select
									v-model="formData.payCompanyId"
									v-selecttext="formData.payCompanyName,customerData,'customerId','customerName'"
									filterable
									size="mini"
									class="others"
									:disabled="isGet"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="结算截止日期" prop="endDate" class="top">
								<el-date-picker
									v-model="formData.endDate"
									type="date"
									size="mini"
									:disabled="isGet"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									@change="changeCompanyId"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<el-card class="bgcard">合计金额 ：{{ formData.totalAmount | formatMoney }}</el-card>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="tableData"
									:columns="tableColumn"
									:tableHeight="tableHeight"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
import api from '@/api/billingSettlementSys/rulerCost/index'

export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array
    },
    isGet: {
      type: Boolean,
      default: false
    },
    clickRow: {
      type: Object
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        shipvoyageName: '',
        companyId: '',
        berthNo: '',
        cargoOwnerName: '',
        tradeType: '',
        cargoAgentName: '',
        volume: '',
        berthTime: '',
        leaveBerthTime: '',
        payCompanyId: '',
        payCompanyName: '',
        endDate: '',
        totalAmount: 0 // 总计金额
      }, // from
      tableData: [], // 结算数据
      tableColumn: [
        // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'quantity', label: '数量' },
        { prop: 'rate', label: '单价' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'amount', label: '金额(元)', isMoney: true },
        { prop: 'tax', label: '税率' },
        { prop: 'taxAmount', label: '税额', isMoney: true }
      ],
      compData: [] // 组织
    }
  },
  created() {
    this.getComp()
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 400
    }
  },
  methods: {
    /**
		 * 获取业务单元
		 */
    async getComp() {
      const res = await publicapi.getListComp()
      this.compData = res.data.data
    },
    /**
		 * 修改组织
		 */
    changeCompanyId(e, settlementStatus, row) {
      const params = {
        cargoInfoId: this.clickRow.cargoInfoId,
        measureType: this.clickRow.measureType,
        companyId: this.formData.companyId,
        endDate: this.formData.endDate
      }
      if (settlementStatus) {
        api.reqGetSettlementById(e).then(res => {
          this.tableData = res.data.data
          this.formData.totalAmount = row.totalAmount
          this.formData.payCompanyId = row.payCompanyId
          this.formData.endDate = row.endDate
        })
      } else {
        api.reqGetSettlement(params).then(res => {
          this.tableData = res.data.data.costList
          this.formData.totalAmount = res.data.data.totalAmount
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
